<template>
  <el-drawer
    title="系统菜单"
    size="250px"
    custom-class="drawerBox"
    :withHeader="false"
    :visible.sync="drawer"
    :direction="direction"
    :show-close="false"
  >
    <div class="menuList">
      <div class="menuTitle">
        <span>系统菜单</span>
      </div>
      <el-menu
        default-active="0"
        class="el-menu-vertical-demo el-menu-demo"
        background-color="transparent"
        text-color="#1a2b52"
        @open="handleOpen"
        @close="handleClose">
        <el-menu-item  v-for="(item, index) in menuData" :index="index.toString()" :key="index" @click="handleMenu(item)">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </el-drawer>
</template>

<script>
import {getMenu} from '@/api/user'
export default {
  data () {
    return {
      drawer: false,
      direction: 'ltr',
      menuData: [
        {id: 1, name: '信息中心IT运维监管平台'},
        {id: 2, name: '省公司IT运维监管平台'},
        {id: 3, name: '综合单位IT运维监管平台'},
        {id: 4, name: '灾备中心IT运维监管平台1'},
        {id: 5, name: '灾备中心IT运维监管平台2'},
        {id: 6, name: '灾备中心IT运维监管平台3'},
        {id: 7, name: '贵阳局IT运维监管平台'},
        {id: 8, name: '安顺局IT运维监管平台'},
        {id: 9, name: '遵义局IT运维监管平台'},
        {id: 10, name: '都匀局IT运维监管平台'},
        {id: 11, name: '凯里局IT运维监管平台'},
        {id: 12, name: '铜仁局IT运维监管平台'},
        {id: 13, name: '六盘水局IT运维监管平台'},
        {id: 14, name: '兴义局IT运维监管平台'},
        {id: 15, name: '毕节局IT运维监管平台'},
        {id: 16, name: '贵安局IT运维监管平台'}
      ]
    }
  },
  methods: {
    init () {
      this.drawer = true
      this.queryGetMenu()
    },
    async queryGetMenu () {
      const data = await getMenu()
      if (data) {
        if (data.code === 200) {
          this.menuData = data.data
        } else {
          this.menuData = []
        }
      }
    },
    handleMenu (val) {
      this.drawer = false
      window.open(val.url)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.menuList{
  padding: 5px;
  .menuTitle{
    text-align: center;
    span{
      font-size: 16px;
      line-height: 35px;
    }
  }
}
</style>
